<template>
	<view v-if="isRender">
		<view class="exchange-box">
			<image src="/static/images1/starPond/wz.png" style="width: 548rpx; height: 163rpx;"></image>
			<!-- <view class="number-box">
				<view>
					<image src="/static/images1/starPond/star-icon.png" style="width: 36rpx; height: 36rpx;"></image>
					<text>9,999</text>
				</view>
				<view>
					<image src="/static/images1/starPond/s-icon.png" style="width: 36rpx; height: 36rpx;"></image>
					<text>20</text>
				</view>
				<view>
					<image src="/static/images1/starPond/j-icon.png" style="width: 36rpx; height: 36rpx;"></image>
					<text>10</text>
				</view>
			</view> -->
			<image src="/static/images1/starPond/top-pic.png" style="width: 410rpx; height: 337rpx;"></image>
			<!-- <view class="time-box">
				<image src="/static/images1/starPond/time.png" style="width: 28rpx; height: 28rpx;"></image>
				<up-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss" autoStart millisecond @change="onChange">
					<view class="time">
						<view class="time__custom">
							<text class="time__custom__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}h</text>
						</view>
						<text class="time__doc">:</text>
						<view class="time__custom">
							<text class="time__custom__item">{{ timeData.minutes }}m</text>
						</view>
						<text class="time__doc">:</text>
						<view class="time__custom">
							<text class="time__custom__item">{{ timeData.seconds }}s</text>
						</view>
					</view>
				</up-count-down>
			</view> -->
			<!-- <view class="btn-box">
				<u-button customStyle="border-radius:16rpx;height:88rpx;font-weight: 500;font-size: 32px;color: #FFFFFF;"
					color="linear-gradient(90deg, #30272A 0%, #DAA8B7 100%)" :text="getStr('buy')"></u-button>
			</view> -->
		</view>
		
		<view class="title-box">
			{{getStr('starPond.total')}}
		</view>
		<view class="number-item-box">
			<view class="number-item" v-for="item in info.totalArr">
				{{item}}
			</view>
		</view>
		<view class="statistics-box">
			<view class="item">
				{{getStr('starPond.freezeQuantity')}}
				<text>{{info.frozenAmount}}</text>
			</view>
			<view class="item">
				{{getStr('starPond.circulationQuantity')}}
				<text>{{info.circulationAmount}}</text>
			</view>
		</view>
		<view class="title-box">
			{{getStr('starPond.record')}}
		</view>
		<view class="table-box">
			<view class="title-box">
				<text>{{getStr('starPond.name')}}</text>
				<text>{{getStr('starPond.options')}}</text>
				<text>{{getStr('starPond.cartName')}}</text>
				<text>{{getStr('starPond.number')}}</text>
			</view>
			<view class="item" v-for="item in recordList">
				<text>{{item.nickName}}</text>
				<text>合成</text>
				<text>{{item.cardName.enName}}</text>
				<text>{{item.amount}}</text>
			</view>
		</view>
		<view style="height: calc( 148rpx + env(safe-area-inset-bottom));"></view>
		<tabbarVue :current="1"></tabbarVue>
	</view>
</template>

<script setup>
	import tabbarVue from '@/components/tabbar/index.vue'
	import defaultImg from '@/static/default-img.png'
	import zsImg from '@/static/zs.png'
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		getStarPond
	} from '@/common/api/common.js'

	// 使用 reactive 创建响应式对象  
	const timeData = ref({});
	const isRender = ref(true)
	
	const info = ref({})
	const recordList = ref([])
	
	
	// 定义 onChange 方法  
	const onChange = (e) => {
		timeData.value = e;
	};


	const goPage = (url) => {
		uni.navigateTo({
			url: url
		})
	}

	const getStr = (key) => {
		return uni.$t(key)
	}
	const setIsRender = () => {
		isRender.value = false
		setTimeout(() => {
			isRender.value = true
		}, 50)
	}
	
	const getStarPondFn = async () => {
		const res = await getStarPond()
		if(res.code == 200){
			console.log(res.data.starInfo.total)
			info.value = {
				...res.data.starInfo,
				totalArr:[...res.data.starInfo.total.toString()]
			}
			recordList.value = res.data.userCardRecord
		}
	}
	
	onLoad(()=>{
		getStarPondFn()
	})
	onShow(() => {
		uni.$tg.hideButton()
		setIsRender()
	})
</script>
<style>
	page {
		background: #1C1E23;
	}
</style>
<style lang="scss" scoped>
	.exchange-box {
		width: calc(100vw - 28rpx - 28rpx);
		margin: 28rpx auto 0;
		background: linear-gradient(180deg, #000000 0%, #262930 100%);
		padding: 60rpx 28rpx;
		box-sizing: border-box;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.number-box {
			display: flex;
			justify-content: center;
			margin-bottom: 30rpx;

			view {
				color: #ffffff;
				display: flex;
				align-items: center;
				padding: 0 18rpx;

				text {
					font-weight: bold;
					font-size: 36rpx;
					color: #FFFFFF;
					margin-left: 10rpx;
				}
			}
		}

		.time-box {
			padding: 18rpx 0;
			color: #ffffff;
			display: flex;
			align-items: center;

			.time {
				@include flex;
				align-items: center;
				margin-left: 10rpx;

				&__custom {
					margin-top: 4px;
					// width: 22px;
					// height: 22px;
					border-radius: 4px;
					/* #ifndef APP-NVUE */
					display: flex;
					/* #endif */
					justify-content: center;
					align-items: center;

					&__item {
						color: #fff;
						font-size: 12px;
						text-align: center;
					}
				}

				&__doc {
					color: #ffffff;
					// padding: 0px 4px;
				}

				&__item {
					color: #ffffff;
					font-size: 15px;
					margin-right: 4px;
				}
			}
		}

		.btn-box {
			width: 100%;
		}
	}
	
	.title-box{
		font-weight: bold;
		font-size: 34rpx;
		color: #FFFFFF;
		text-align: center;
		padding: 50rpx 0 36rpx;
	}
	
	.number-item-box{
		display: flex;
		justify-content: center;
		align-items: center;
		.number-item{
			width: 80rpx;
			height: 100rpx;
			margin: 0 3rpx;
			background: #262930;
			border-radius: 12rpx;
			border: 2rpx solid;
			border-image: radial-gradient(circle, rgb(38, 41, 48), rgb(255, 255, 255), rgb(38, 41, 48)) 2 2;
			font-weight: bold;
			font-size: 48rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 100rpx;
		}
	}
	
	.statistics-box{
		width: calc(100vw - 28rpx - 28rpx);
		margin: 80rpx auto 0;
		background: #262930;
		padding: 58rpx 28rpx;
		box-sizing: border-box;
		border-radius: 12rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.item{
			color: #fff;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			text{
				display: block;
				font-weight: bold;
				font-size: 48rpx;
				color: #FFFFFF;
			}
		}
	}
	
	.table-box {
		width: calc(100% - 28rpx - 28rpx);
		margin: 0 auto 0;
		background-color: #262930;
		border-radius: 16rpx;
		padding-bottom: 16rpx;
	
		.title-box {
			height: 80rpx;
			border-bottom: 1rpx dashed #FFFFFF80;
			box-sizing: border-box;
			line-height: 80rpx;
			font-weight: 800;
			font-size: 32rpx;
			color: #FFFFFF80;
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;
			padding: 0 30rpx;
			margin-bottom: 16rpx;
	
			text {
				width: 33.33%;
				text-align: center;
			}
	
			text:first-child {
				text-align: left;
			}
				
			text:last-child {
				text-align: right;
			}
		}
	
		.item {
			padding: 8rpx 30rpx;
			display: flex;
			justify-content: space-between;
			color: #FFFFFF;
			font-size: 20rpx;
	
			text {
				width: 33.33%;
				text-align: center;
			}
	
			text:first-child {
				text-align: left;
			}
	
			text:last-child {
				text-align: right;
			}
		}
	}
</style>